{% load charts %}
<style type="text/css">
table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: dotted dotted dotted dotted;
	border-color: gray gray gray gray;
	border-collapse: collapse;
	background-color: white;
}
table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: dotted dotted dotted dotted;
	border-color: green green green green;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	/*text-align: center;*/
	border-style: dotted dotted dotted dotted;
	border-color: green green green green;
	-moz-border-radius: 0px 0px 0px 0px;
}
</style>



<table class="sample">
	
<tr><th>Weather-Note</th><td>
	{% note weather taped_y sunny Barcelona temps as img %}
</td><td><pre>
&#123;% note weather taped_y sunny Barcelona temps as img %&#125;
</pre></td></tr>

<tr><th>Large-Icon-Bubble</th><td>
{% bubble icon_text_big snack bb $2.99 ffbb00 black as img %}
</td><td><pre>
&#123;% bubble icon_text_big snack bb $2.99 ffbb00 black as img %&#125;
</pre></td></tr>

<tr><th>Adv-Icon-Pin</th><td>
{% pin xpin_icon star home aqua red as img %}
</td><td><pre>
&#123;% pin xpin_icon star home aqua red as img %&#125;
</pre></td></tr>

<tr><th>Text</th><td>
{% text darkred 16 h red b '1600 Ampitheatre Parkway\nMountain View, CA\n(650)+253-0000' as img %}
</td><td><pre>
&#123;% text darkred 16 h red b '1600 Ampitheatre Parkway\nMountain View, CA\n(650)+253-0000' as img %&#125;
</pre></td></tr>

<tr><th>Guide-Granularity-20</th><td>
{% chart  Line fohmnytenefohmnytene  encoding=simple  %}
{% size 200 100  %}
{% axes type xy  %}
{% axes label April May June  %}
{% axes label None  50+Kb  %}
{% endchart %} </td><td><pre>&#123;% chart  Line fohmnytenefohmnytene  encoding=simple  %&#125;
&#123;% size 200 100  %&#125;
&#123;% axes type xy  %&#125;
&#123;% axes label April May June  %&#125;
&#123;% axes label None  50+Kb  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Pie</th><td>
{% chart  Pie3D  1 2 3 4   %}
{% label A B C D  %}
{% color 00dd00  %}
{% endchart %} </td><td><pre>&#123;% chart  Pie3D  1 2 3 4   %&#125;
&#123;% label A B C D  %&#125;
&#123;% color 00dd00  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Intro</th><td>
{% chart  Pie3D piedata encoding=text  %}
{% size 250 100  %}
{% label Hello  World  %}
{% endchart %} </td><td><pre>&#123;% chart  Pie3D piedata  encoding=text  %&#125;
&#123;% size 250 100  %&#125;
&#123;% label Hello  World  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Bhg</th><td>
{% chart  HorizontalBarGroup bhgdata  encoding=simple  %}
{% color 4d89f9 c6d9fd  %}
{% size 200 125  %}
{% endchart %} </td><td><pre>&#123;% chart  HorizontalBarGroup bhgdata  encoding=simple  %&#125;
&#123;% color 4d89f9 c6d9fd  %&#125;
&#123;% size 200 125  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Venn</th><td>
{% chart  Venn  venndata encoding=text  %}
{% scale 0 100  %}
{% endchart %} </td><td><pre>&#123;% chart  Venn  venndata  encoding=text  %&#125;
&#123;% scale 0 100  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Fill</th><td>
{% chart  Line  pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp   %}
{% color ff0000  %}
{% line 4 3 0  %}
{% axes type xy  %}
{% axes label 1 2 3 4 5  %}
{% axes label None 50 100  %}
{% fill c lg 45 ffffff 0 76A4FB 0.75  %}
{% fill bg s EFEFEF  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp   %&#125;
&#123;% color ff0000  %&#125;
&#123;% line 4 3 0  %&#125;
&#123;% axes type xy  %&#125;
&#123;% axes label 1 2 3 4 5  %&#125;
&#123;% axes label None 50 100  %&#125;
&#123;% fill c lg 45 ffffff 0 76A4FB 0.75  %&#125;
&#123;% fill bg s EFEFEF  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Line-Lc</th><td>
{% chart  Line fooZaroo  encoding=simple  %}
{% size 200 100  %}
{% endchart %} </td><td><pre>&#123;% chart  Line fooZaroo  encoding=simple  %&#125;
&#123;% size 200 100  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Title</th><td>
{% chart  Line  GurMrabsClgubaolGvzCrgrefOrnhgvshyvforggregunahtyl   %}
{% title 'The Zen of Python' 00cc00 36  %}
{% color 00cc00  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  GurMrabsClgubaolGvzCrgrefOrnhgvshyvforggregunahtyl   %&#125;
&#123;% title 'The Zen of Python' 00cc00 36  %&#125;
&#123;% color 00cc00  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Axes</th><td>
{% chart  Line  foobarbaz   %}
{% color 76A4FB  %}
{% axes type xyrx  %}
{% axes label Foo  Bar  Baz  %}
{% axes label None  20K  60K  100K  %}
{% axes label A  B  C  %}
{% axes label None 20 40 60 80  %}
{% axes style 0000dd  14  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  foobarbaz   %&#125;
&#123;% color 76A4FB  %&#125;
&#123;% axes type xyrx  %&#125;
&#123;% axes label Foo  Bar  Baz  %&#125;
&#123;% axes label None  20K  60K  100K  %&#125;
&#123;% axes label A  B  C  %&#125;
&#123;% axes label None 20 40 60 80  %&#125;
&#123;% axes style 0000dd  14  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Qr-Code</th><td>
{% chart  QRCode qrstr %}
{% output_encoding UTF-8  %}
{% level_data M 0  %}
{% endchart %} </td><td><pre>&#123;% chart  QRCode qrstr %&#125;
&#123;% output_encoding UTF-8  %&#125;
&#123;% level_data M 0  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Markers</th><td>
{% chart  Line  helloWorldZZZZ098236561   %}
{% marker c ff0000 0 1 20  %}
{% marker d 80C65A 0 6 15  %}
{% marker o FF9900 0 4.0 20.0  %}
{% marker s 3399CC 0 5.0 10.0  %}
{% marker v BBCCED 0 6.0 1.0  %}
{% marker V 3399CC 0 7.0 1.0  %}
{% marker x FFCC33 0 8.0 20.0  %}
{% marker h 000000 0 0.30 0.5   %}
{% marker a 000099 0 4 10  %}
{% marker R A0BAE9 0 8 0.6  %}
{% marker r E5ECF9 0 1 0.25  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  helloWorldZZZZ098236561   %&#125;
&#123;% marker c ff0000 0 1 20  %&#125;
&#123;% marker d 80C65A 0 6 15  %&#125;
&#123;% marker o FF9900 0 4.0 20.0  %&#125;
&#123;% marker s 3399CC 0 5.0 10.0  %&#125;
&#123;% marker v BBCCED 0 6.0 1.0  %&#125;
&#123;% marker V 3399CC 0 7.0 1.0  %&#125;
&#123;% marker x FFCC33 0 8.0 20.0  %&#125;
&#123;% marker h 000000 0 0.30 0.5   %&#125;
&#123;% marker a 000099 0 4 10  %&#125;
&#123;% marker R A0BAE9 0 8 0.6  %&#125;
&#123;% marker r E5ECF9 0 1 0.25  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Granularity-80</th><td>
{% chart  Line formostthisamazingdayfortheleapinggreenlformostthisamazingdayfortheleapinggreenl  %}
{% encoding simple  %}
{% size 200 100  %}
{% axes type xy  %}
{% axes label April May June  %}
{% axes label None  50+Kb  %}
{% endchart %} </td><td><pre>&#123;% chart  Line formostthisamazingdayfortheleapinggreenlformostthisamazingdayfortheleapinggreenl  %&#125;
&#123;% encoding simple  %&#125;
&#123;% size 200 100  %&#125;
&#123;% axes type xy  %&#125;
&#123;% axes label April May June  %&#125;
&#123;% axes label None  50+Kb  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Jacobian</th><td>
{% chart  Line ALAtBmC1EcGYIsLWOXRuVdZhd9ivn4tYzO5b.. encoding=extended  %}
{% size 300 200  %}
{% color cc0000  %}
{% fill c s eeeeee  %}
{% legend Sweet  %}
{% endchart %} </td><td><pre>&#123;% chart  Line ALAtBmC1EcGYIsLWOXRuVdZhd9ivn4tYzO5b.. encoding=extended  %&#125;
&#123;% size 300 200  %&#125;
&#123;% color cc0000  %&#125;
&#123;% fill c s eeeeee  %&#125;
&#123;% legend Sweet  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Meter</th><td>
{% chart  Meter 70  %}
{% label Hello  %}
{% size 225 125  %}
{% endchart %} </td><td><pre>&#123;% chart  Meter 70  %&#125;
&#123;% label Hello  %&#125;
&#123;% size 225 125  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Chbh-Clipped</th><td>
{% chart  HorizontalBarStack hello  encoding=simple  %}
{% color 4d89f9  %}
{% size 200 125  %}
{% endchart %} </td><td><pre>&#123;% chart  HorizontalBarStack hello  encoding=simple  %&#125;
&#123;% color 4d89f9  %&#125;
&#123;% size 200 125  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Bvg</th><td>
{% chart  VerticalBarGroup hello world  encoding=simple  %}
{% color 4d89f9 c6d9fd  %}
{% size 200 125  %}
{% endchart %} </td><td><pre>&#123;% chart  VerticalBarGroup hello world  encoding=simple  %&#125;
&#123;% color 4d89f9 c6d9fd  %&#125;
&#123;% size 200 125  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Bhs</th><td>
{% chart  HorizontalBarStack ello  encoding=simple  %}
{% color 4d89f9  %}
{% size 200 125  %}
{% endchart %} </td><td><pre>&#123;% chart  HorizontalBarStack ello  encoding=simple  %&#125;
&#123;% color 4d89f9  %&#125;
&#123;% size 200 125  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Map</th><td>
{% chart  Map fSGBDQBQBBAGABCBDAKLCDGFCLBBEBBEPASDKJBDD9BHHEAACAC  encoding=simple  %}
{% color f5f5f5 edf0d4 6c9642 365e24 13390a  %}
{% fill bg s eaf7fe  %}
{% size 440 220  %}
{% map usa  NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEOHIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR  %}
{% endchart %} </td><td><pre>&#123;% chart  Map fSGBDQBQBBAGABCBDAKLCDGFCLBBEBBEPASDKJBDD9BHHEAACAC  encoding=simple  %&#125;
&#123;% color f5f5f5 edf0d4 6c9642 365e24 13390a  %&#125;
&#123;% fill bg s eaf7fe  %&#125;
&#123;% size 440 220  %&#125;
&#123;% map usa  NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEOHIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Grid</th><td>
{% chart  Line  foobarbaz   %}
{% color 76A4FB  %}
{% line 3 6 3  %}
{% grid 20.0 25.0 1 0  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  foobarbaz   %&#125;
&#123;% color 76A4FB  %&#125;
&#123;% line 3 6 3  %&#125;
&#123;% grid 20.0 25.0 1 0  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Bar</th><td>
{% chart  HorizontalBarGroup  hell orld   %}
{% color cc0000  00aa00  %}
{% bar 10 5 10  %}
{% endchart %} </td><td><pre>&#123;% chart  HorizontalBarGroup  hell orld   %&#125;
&#123;% color cc0000  00aa00  %&#125;
&#123;% bar 10 5 10  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Line</th><td>
{% chart  Line  hX1xPj   %}
{% axes type xy  %}
{% axes label Mar  Apr  May  June  July  %}
{% axes label None  50+Kb  %}
{% color ff0000  %}
{% line 6 5 2  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  hX1xPj   %&#125;
&#123;% axes type xy  %&#125;
&#123;% axes label Mar  Apr  May  June  July  %&#125;
&#123;% axes label None  50+Kb  %&#125;
&#123;% color ff0000  %&#125;
&#123;% line 6 5 2  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Guide-Chbh-Size</th><td>
{% chart  HorizontalBarStack hello  encoding=simple  %}
{% color 4d89f9  %}
{% size 200 125  %}
{% bar 10  %}
{% endchart %} </td><td><pre>&#123;% chart  HorizontalBarStack hello  encoding=simple  %&#125;
&#123;% color 4d89f9  %&#125;
&#123;% size 200 125  %&#125;
&#123;% bar 10  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Legend</th><td>
{% chart  Line  FOETHECat leafgreen IRON4YOUs   %}
{% color ff0000 00ff00 0000ff  %}
{% legend 20q  %}
{% axes type y  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  FOETHECat leafgreen IRON4YOUs   %&#125;
&#123;% color ff0000 00ff00 0000ff  %&#125;
&#123;% legend 20q  %&#125;
&#123;% axes type y  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>Legend2</th><td>
{% chart  Line  abcde FGHIJ 09876   %}
{% color ff0000 00ff00 0000ff  %}
{% legend Animals Vegetables Minerals  %}
{% legend_pos l  %}
{% axes type y  %}
{% endchart %} </td><td><pre>&#123;% chart  Line  abcde FGHIJ 09876   %&#125;
&#123;% color ff0000 00ff00 0000ff  %&#125;
&#123;% legend Animals Vegetables Minerals  %&#125;
&#123;% legend_pos l  %&#125;
&#123;% axes type y  %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>values_over_100</th><td>
{% chart Line 50 150 100 200 150 50 100 %}
{% axes type xy %}
{% axes range 1 0 300 %}
{% label Jan Feb Mar Apr May Jun Jul %}
{% scale 0 300 %}
{% endchart %} </td><td><pre>&#123;% chart Line 50 150 100 200 150 50 100 %&#125;
&#123;% axes type xy %&#125;
&#123;% axes range 1 0 300 %&#125;
&#123;% label Jan Feb Mar Apr May Jun Jul %&#125;
&#123;% scale 0 300 %&#125;
&#123;% endchart %&#125; </pre></td></tr>

<tr><th>params_from_dict</th><td>
{% for g in elections %}
    {% chart g.type g.data %}
        {% size 440 120 %}
        {% title g.title %}
        {% label g.labels %}
        {% color g.colors %}
        {% legend g.legend %}
        {% fill c lg 90 ffffff 0 99bbff 0.85  %}
    {% endchart %}
    <br/> <br/>
{% endfor %} </td><td><pre> &#123;% for g in elections %&#125;
    &#123;% chart g.type g.data %&#125;
        &#123;% size 440 100 %&#125;
        &#123;% title g.title %&#125;
        &#123;% label g.labels %&#125;
        &#123;% color g.colors %&#125;
        &#123;% legend g.legend %&#125;
        &#123;% fill c lg 90 ffffff 0 99bbff 0.85  %&#125;
    &#123;% endchart %&#125;
    &lt;br/&gt; &lt;br/&gt;
&#123;% endfor %&#125; </pre></td></tr>
</table>

